<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>
<div class="layui-container" style="margin-top: 50px;">

    <div class="layui-container" style="width: 500px;height: 330px;padding-top: 60px;">

        <form class="layui-form" action="/client/user/save" method="post">

            <div class="layui-form-item">
                <label class="layui-form-label">用户名：</label>
                <div class="layui-inline">
                    <input type="text" class="layui-input" name="username" lay-verify="username" autocomplete="off"
                           placeholder="请输入用户名">
                </div>

            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码：</label>
                <div class="layui-inline">
                    <input type="text" class="layui-input" name="password" lay-verify="password" autocomplete="off"
                           placeholder="请输入密码">
                </div>

            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">昵称：</label>
                <div class="layui-inline">
                    <input type="text" class="layui-input" name="nickname" lay-verify="required" autocomplete="off"
                           placeholder="请输入昵称">
                </div>

            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别：</label>
                <div class="layui-inline">
                    <input type="radio" name="gender" value="男" title="男" checked="">
                    <input type="radio" name="gender" value="女" title="女">
                </div>

            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">联系电话：</label>
                <div class="layui-inline">
                    <input type="text" class="layui-input" name="telephone" lay-verify="telephone" autocomplete="off"
                           placeholder="请输入联系电话">
                </div>

            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">地址：</label>
                <div class="layui-inline">
                    <input type="text" class="layui-input" name="address" lay-verify="required" autocomplete="off"
                           placeholder="请输入地址">
                </div>

            </div>
            <div class="layui-form-item">
                <button class="layui-btn" lay-submit="" style="margin-left: 160px;">提交</button>
            </div>


        </form>

    </div>

</div>
<script src="/layui/layui.js" charset="utf-8"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    layui.use(['form', 'element'], function () {
        var form = layui.form;
        var element = layui.element;

        //自定义验证规则
        form.verify({
            username: function (value) {
                if (value.length == 0) {
                    return "用户名不能为空";
                }
            },
            password: [/^[A-Za-z0-9]+$/, "密码必须由数字和字母组成"],
            telephone: [/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/, "请输入正确的电话"]
        });

    });


</script>
</body>
</html>